<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="/WEB-INF/pages/common/head.jsp" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="${resourceServer }/css/pintuer.css">
    <link rel="stylesheet" href="${resourceServer }/css/admin.css">
    <script src="${resourceServer }/js/jquery.js"></script>
    <script src="${resourceServer }/js/pintuer.js"></script>
    <script src="${resourceServer }/js/vue.min.js"></script>
    <script charset="utf-8" src="${basepath }/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="${basepath }/kindeditor/lang/zh_CN.js"></script>
    <style>
        .search li{
            border:1px solid #ccc;
            padding:0px 10px;
            cursor:pointer;
        }
        .search .select{
            background:#66f9fd;
            color:#fff;
        }
    </style>
</head>
<body>
<%--<c:out value="${product}"></c:out>--%>
<div id="app" class="panel admin-panel">
    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>修改商品</strong></div>
    <div class="padding border-bottom">
        <ul class="search" style="padding-left:10px;">
            <li :class="{select:selected==1}" @click="selected=1">基本信息</li>
            <li :class="{select:selected==2}" @click="selected=2">图片</li>
            <li :class="{select:selected==3}" @click="selected=3">详细信息</li>
            <li :class="{select:selected==4}" @click="selected=4">其他信息</li>
        </ul>
    </div>
    <form method="post" class="form-x" enctype="multipart/form-data" >
        <div class="body-content" v-show="selected==1">
            <div class="form-group">
                <div class="label">
                    <label>商品名称：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="${product.name}" name="name" data-validate="required:请输入品牌名" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>品牌：</label>
                </div>
                <div class="field">
                    <select class="input w50" name="brandId">
                        <c:forEach items="${brands }" var="brand">
                            <option value="${brand.id }">${brand.name }</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>排序：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="${product.sort}" name="sort"  data-validate="plusinteger:排序必须为数字" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>是否热卖：</label>
                </div>
                <c:if test="${product.isHot==1}">
                    <%--是热卖商品--%>
                    <div class="field" style="padding-top:8px;">
                        <label>是<input name="isHot" type="radio" value="1" checked></label>&nbsp;&nbsp;
                        <label>否<input name="isHot" type="radio" value="0"></label>
                    </div>
                </c:if>
                <c:if test="${product.isHot==0}">
                    <%--不是是热卖商品--%>
                    <div class="field" style="padding-top:8px;">
                        <label>是<input name="isHot" type="radio" value="1"></label>&nbsp;&nbsp;
                        <label>否<input name="isHot" type="radio" value="0" checked></label>
                    </div>
                </c:if>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>是否新品：</label>
                </div>
                <c:if test="${product.isNew==1}">
                    <%--是新品--%>
                    <div class="field" style="padding-top:8px;">
                        <label>是<input name="isNew" type="radio" value="1" checked></label>&nbsp;&nbsp;
                        <label>否<input name="isNew" type="radio" value="0"></label>
                    </div>
                </c:if>
                <c:if test="${product.isNew==0}">
                    <%--不是新品--%>
                    <div class="field" style="padding-top:8px;">
                        <label>是<input name="isNew" type="radio" value="1" ></label>&nbsp;&nbsp;
                        <label>否<input name="isNew" type="radio" value="0" checked> </label>
                    </div>
                </c:if>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>是否推荐：</label>
                </div>
                <c:if test="${product.isCommmend==1}">
                    <div class="field" style="padding-top:8px;">
                        <label>是<input name="isCommend" type="radio" value="1" checked></label>&nbsp;&nbsp;
                        <label>否<input name="isCommend" type="radio" value="0"></label>
                    </div>
                </c:if>
                <c:if test="${product.isCommmend==0}">
                    <div class="field" style="padding-top:8px;">
                        <label>是<input name="isCommend" type="radio" value="1" ></label>&nbsp;&nbsp;
                        <label>否<input name="isCommend" type="radio" value="0" checked></label>
                    </div>
                </c:if>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
                </div>
            </div>
        </div>
        <div class="body-content" v-show="selected==2">
            <div class="form-group">
                <div class="label">
                    <label>图片：</label>
                </div>
                <div class="field">
                    <input type="file" id="image" name="image" style="display:none" enctype="multipart/form-data" multiple @change="imgchange()" >
                    <input type="button" class="button bg-blue margin-left" @click="openImage()" value="+ 浏览上传"  style="float:left;">
                </div>
            </div>
            <div id="yulan"></div>
        </div>
        <div class="body-content" v-show="selected==3">
            <div class="form-group">
                <div class="label">
                    <label>商品详细信息：</label>
                </div>
                <div class="field">
                    <textarea id="description" name="description" class="input" style="height:450px; border:1px solid #ddd;">${product.description}</textarea>
                    <div class="tips"></div>
                </div>
            </div>
        </div>
        <div class="body-content" v-show="selected==4">
            <div class="form-group">
                <div class="label">
                    <label>参考价格：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="${product.price}" name="price" data-validate="required:请输入参考价,plusdouble:必须是小数" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>销量：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" value="${product.sales}" name="sales" data-validate="required:请输入销量,plusinteger:必须是正整数" />
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>内存：</label>
                </div>
                <div class="field" style="padding-top:8px;">
                    <c:forEach items="${storages }" var="storage">
                        <label>
                                ${storage.name }
                            <input type="checkbox" name="storageList" value="${storage.id }">&nbsp;&nbsp;
                        </label>
                    </c:forEach>

                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>颜色：</label>
                </div>
                <div class="field" style="padding-top:8px;">
                    <c:forEach items="${colors }" var="color">
                        <label>
                                ${color.name }
                            <input type="checkbox" name="colorList" value="${color.id }">&nbsp;&nbsp;
                        </label>
                    </c:forEach>

                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    KindEditor.ready(function(K) {
        window.editor = K.create('#description',{
            width : "700px",
            height: "450px",
            uploadJson:"http://localhost:8082/back/product/upload.do",
            filePostName:"img"
        });
    });
    var vue=new Vue({
        el:"#app",
        data:{
            selected:1,
        },
        methods:{
            openImage:function(){
                $("#image").click();
            },
            imgchange:function(){
                $("#yulan").empty();
                for(var i=0;i<$("#image")[0].files.length;i++){
                    var fileReader=new FileReader();
                    fileReader.onload=function(e){
                        var $img=$("<img>");
                        $img.attr("src",e.target.result);
                        $("#yulan").append($img);
                    }
                    fileReader.readAsDataURL($("#image")[0].files[i]);
                }

            }
        }
    });
    /* $(function(){
     $("#logo").change(function(){
     var fileReader=new FileReader();
     fileReader.onload=function(e){
     $("#url").attr("data-image",e.target.result);
     $("#url").val($("#logo").val());
     }
     fileReader.readAsDataURL($("#logo")[0].files[0]);
     });
     $("#image").click(function(){
     $("#logo").click();
     });
     }); */
</script>
</body>
</html>